<template>
  <div class="hello">
    <div style="padding: 15px" v-if="show == true">
      <p class="title">第一步：信息真实性确认</p>
      <div class="check">
        <el-checkbox v-model="checked1" @change="basicFacts"
          >我确认个人基本信息无误</el-checkbox
        >
        <el-button class="btn" @click="basicFactsLook">查看</el-button>
      </div>
      <div class="check">
        <el-checkbox v-model="checked2" @change="check"
          >我确认代扣信息核对无误</el-checkbox
        >
        <el-button class="btn" @click="withholdLook">查看</el-button>
      </div>
      <div class="checkHt">
        <el-checkbox v-model="checked3" @change="confirm"
          >我确认《{{ form.name }}乐业分服务合同》无误</el-checkbox
        >
        <div style="text-align: center; margin-top: 20px">
          <el-button class="btnHt" @click="confirmLook">查看</el-button>
          <el-button class="btnHt" @click="downPDF">下载PDF</el-button>
        </div>
      </div>
      <p class="title">第二步：拍摄个人身份证信息</p>
      <div class="cardImg">
        <div class="cardImg_shot">
          <img :src="uploadImg" style="height: 100%; width: 100%" />
        </div>
        <div class="cardImg_height">
          <input
            type="file"
            accept="image/*"
            capture="camera"
            class="file-ipt"
            id="upload_file"
            @change="tirggerFile($event)"
          />
          <el-button type="primary" class="cardBtn" @click="chooseImage"
            >开始拍摄</el-button
          >
        </div>
      </div>
      <p class="title">第三步：真实性承诺信息</p>
      <p class="video_text">
        请头部正对摄像头，手持身份证原件，点击上方开始 念以下内容：
      </p>
      <p class="video_content">
        我承诺本次签约合同号'融立第{{ form.contractNum }}号'
        的合同及相关信息正确无误，是我本人真实意愿，我同意如因真实性问题造成后果承担相应法律责任。
      </p>
      <div class="video">
        <div class="video_shot">
          <img :src="uploadVideo" style="height: 100%; width: 100%" />
        </div>
          <aliUpload @ossUplodType="ossType"></aliUpload>
      </div>
      <p class="title">第四步：代扣签约</p>
      <div class="sign">
        <div style="padding: 22px 10px 24px 10px">
          <p class="sign_text">
            我们将向执行代扣银行卡-{{ form.bankDeposit }}（ {{ bankCardNum }}
            ）银行预留手机号发送代扣签约验证短信，请查收后将验证码填入框内
          </p>
          <div class="sign_check">
            <el-checkbox v-model="checked1"
              >我同意由{{ form.bankDeposit }}平台完成代扣</el-checkbox
            >
          </div>
          <p class="sign_number">银联预留手机号：</p>
          <el-form :inline="true" :model="formLine" class="demo-form-inline">
            <el-row
              ><el-col :span="14">
                <el-form-item>
                  <el-input
                    v-model="formLine.phoneNum"
                    style="width: 100%"
                    placeholder="请输入手机号码"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10" style="text-align: right" v-if="!ylIsConfirm">
                <el-form-item style="width: 100px">
                  <el-button
                    type="primary"
                    class="code"
                    style="width: 100%"
                    @click="getPhoneCode(0)"
                    :disabled="btnDis"
                    >{{ btnText }}</el-button
                  >
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item>
                  <el-input
                    v-model="formLine.ylCode"
                    placeholder="请输入6位验证码"
                    maxlength="6"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10" style="text-align: right" v-if="!ylIsConfirm">
                <el-form-item style="width: 100px">
                  <el-button
                      type="primary"
                      class="code"
                      style="width: 100%"
                      @click="confirmSignContract(0)"
                  >确认</el-button
                  >
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <p class="sign_number">银盛预留手机号：</p>
          <el-form :inline="true" :model="formLine" class="demo-form-inline">
            <el-row
            ><el-col :span="14">
              <el-form-item>
                <el-input
                    v-model="formLine.phoneNum"
                    style="width: 100%"
                    placeholder="请输入手机号码"
                    disabled
                ></el-input>
              </el-form-item>
            </el-col>
              <el-col :span="10" style="text-align: right" v-if="!ysIsConfirm">
                <el-form-item style="width: 100px">
                  <el-button
                      type="primary"
                      class="code"
                      style="width: 100%"
                      @click="getPhoneCode(1)"
                      :disabled="btnDisys"
                  >{{ btnTextys }}</el-button
                  >
                </el-form-item>
              </el-col>
              <el-col :span="14" >
                <el-form-item>
                  <el-input
                      v-model="formLine.ysCode"
                      placeholder="请输入6位验证码"
                      maxlength="6"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10" style="text-align: right" v-if="!ysIsConfirm">
                <el-form-item style="width: 100px">
                  <el-button  @click="confirmSignContract(1)"
                      type="primary"
                      class="code"
                      style="width: 100%"
                  >确认</el-button
                  >
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <el-button
        type="primary"
        :disabled="yzmDisabled"
        class="nick"
        @click="nick"
        >下一步</el-button
      >
    </div>
    <div v-if="show == false" style="width：100%;height:100vh;">
      <div style="line-height: 60vh">签约失效</div>
    </div>
    <!-- 个人基本信息 -->
    <el-dialog
      title="个人基本信息"
      :visible.sync="dialogVisible"
      style="margin-top: 50px"
      width="90%"
    >
      <ul>
        <li>
          <span>姓名：</span><span>{{ form.name }}</span>
        </li>
        <li>
          <span>身份证号：</span><span>{{ form.idCard }}</span>
        </li>
        <li>
          <span>手机号：</span><span>{{ form.phoneNumber }}</span>
        </li>
        <li>
          <span>代扣银行卡：</span><span>{{ form.bankCardNumber }}</span>
        </li>
        <li>
          <span>开户行：</span><span>{{ form.bankDeposit }}</span>
        </li>
      </ul>
    </el-dialog>
    <!-- 代扣信息 -->
    <el-dialog
      title="代扣信息"
      :visible.sync="dialogWithhold"
      style="margin-top: 50px"
      width="90%"
    >
      <ul>
        <li>
          <span>分期金额：</span><span>{{ formWithhold.stagesMoney }}</span>
        </li>
        <li>
          <span>代扣起始月：</span
          ><span>{{ formWithhold.beginHoldMouth }}</span>
        </li>
        <li>
          <span>每月扣款日：</span><span>{{ formWithhold.withHoldDay }}</span>
        </li>
        <li>
          <span>期数：</span><span>{{ formWithhold.periodsNumber }}</span>
        </li>
        <li>
          <span>本金：</span><span>{{ formWithhold.serviceCharge }}</span>
        </li>
      </ul>
    </el-dialog>
    <!-- 查看合同 -->
    <el-dialog
      title="合同详情"
      :visible.sync="dialogContract"
      style="margin-top: 50px"
      width="90%"
    >
      <iframe
        :src="contractUrl"
        width="100%"
        height="400"
        frameborder="0"
        scrolling="auto"
      ></iframe>
      <!-- <img :src="contractUrl" alt=""> -->
    </el-dialog>
    <!-- 人脸识别 -->
    <el-dialog
      title="真人识别验证"
      style="text-align: center"
      :visible.sync="dialogFace"
      width="80%"
    >
      <div class="faceStyle"></div>
      <el-button
        type="primary"
        @click="faceFun"
        style="margin-top: 20px; width: 100%; border-radius: 25px"
        >开始识别</el-button
      >
    </el-dialog>
  </div>
</template>
<script
  type="text/javascript"
  src="https://cn-shanghai-aliyun-cloudauth.oss-cn-shanghai.aliyuncs.com/web_sdk_js/jsvm_all.js"
></script>
<script>
import {
  postConfirmInfo,
  getBasicInfo,
  getWithHoldInfo,
  getContract,
  postUploadCard,
  postInitFace,
  postUploadVideo,
  registerCode,
  confirmMsg,
  downloadPDF,
  filedSign,
  confirmSign,
  checkCompleteSign
} from "../assets/js/api";
import aliUpload from "../components/upload.vue";
import axios from "axios";
export default {
  name: "signUp",
  components: {
    aliUpload,
  },
  data() {
    return {
      uploadImg:
        "https://yun.xssbdc.com/group1/M00/00/09/rBiDGl-fdRCAXuTHAAAOnYhJjHE848.png",
      uploadVideo:
        "https://yun.xssbdc.com/group1/M00/00/09/rBiDGl-fdRCAXuTHAAAOnYhJjHE848.png",
      uploadSuccess:
        "https://yun.xssbdc.com/group1/M00/00/09/rBiDGl-fdNeAM_zeAAAekUmMVe0638.png",
      checked1: false,
      checked2: false,
      checked3: false,
      // 个人基本信息
      form: {},
      formWithhold: {},
      formLine: {
        ylCode: "",
        ysCode:'',
      },
      data: {},
      id: 2,
      show: true,
      dialogVisible: false,
      dialogWithhold: false,
      dialogContract: false,
      dialogFace: false,
      contractUrl: "",
      contractUrlPDF: "",
      videoUrl: "",
      videoShow: false,
      loading: null,
      isDisable: false,
      btnDis: false,
      btnText: "获取验证码",
      btnDisys: false,
      btnTextys: "获取验证码",
      client: {},
      ylIsConfirm:false,
      ysIsConfirm:false
    };
  },
  created() {
    this.id = sessionStorage.getItem("userId");
    // chrome
    document.body.scrollTop = 0;
    // firefox
    document.documentElement.scrollTop = 0;
    // safari
    window.pageYOffset = 0;
    // 获取基本信息
    this.getBasicInfo(this.id);
  },
  computed: {
    bankCardNum: function () {
      let str = this.form.bankCardNumber;
      if (str) {
        return str.substring(str.length - 4);
      }
    },
    //判断验证码禁用
    yzmDisabled: function () {
      return this.isDisable && this.ylIsConfirm || this.ysIsConfirm
        ? false
        : true;
    },
  },
  //  mounted() {
  //   window.onbeforeunload = function() {
  //     localStorage.clear();
  //     sessionStorage.clear();
  //   };
  // },
  methods: {
    //确认签约
    confirmSignContract(type){
      let code='';
      if(type==0){
        //银联通道
        if(this.formLine.ylCode){
          code=this.formLine.ylCode;
        }else {
          this.$message.error('请填写验证码')
          return;
        }
      }
      if(type==1){
        //银盛通道
        if(this.formLine.ysCode){
          code=this.formLine.ysCode;
        }else {
          this.$message.error('请填写验证码')
          return;
        }
      }

      confirmSign(type,code,this.id).then(res=>{
        if(res.code==200){
          this.isDisable = true;
          if(type==0){
            this.ylIsConfirm=true;
          }else {
            this.ysIsConfirm=true;
          }
          this.$message.success(res.message);
        }

      })
    },
    //生成pdf下载
    async downPDF() {
      let that = this;
      //判断是否含有PDF路径
      if (that.contractUrlPDF) {
        console.log("有PDF");
      } else {
        console.log("没有PDF");
        let { data, code } = await downloadPDF(this.id);
        if (code !== 200) {
          this.show = false;
          return;
        }
        that.contractUrlPDF = data;
      }
      console.log(that.contractUrlPDF);
      let link = document.createElement("a"); //创建a标签
      link.style.display = "none"; //使其隐藏
      link.href = that.contractUrlPDF; //赋予文件下载地址
      link.setAttribute("download", "合同"); //设置下载属性 以及文件名
      document.body.appendChild(link); //a标签插至页面中
      link.click(); //强制触发a标签事件
      document.body.removeChild(link);
    },
    //获取手机验证码
    getPhoneCode(type) {
      let that = this;
      filedSign(type,this.id).then((res) => {
        if (res.code == 200) {
          that.$message.success(res.message);
          if(type==0){
            that.countDown();
          }else {
            that.countDownYS();
          }

        }
      });
    },
    // 上传视频是否成功
    ossType(data) {
      let that = this;
      if (data == true) {
        that.$message.success('上传成功');
        this.uploadVideo = this.uploadSuccess;

      }
    },
    // 上传视频
    async handleChange(el) {
      let that = this;
      const videoFormdata = new FormData();
      videoFormdata.append("file", el.target.files[0]);
      that.loading = that.$loading({
        lock: true,
        text: "上传中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      postUploadVideo(that.id, videoFormdata).then((res) => {
        //关闭加载窗口
        that.loading.close();
        this.videoShow = true;
        //清空input file的值
        let test = document.getElementById("fileUpload");
        test.value = "";
        if (res.code && res.code == 200) {
          that.loading.close();
          this.videoUrl = res.data;
          that.$message.success(res.message);
          this.uploadVideo = this.uploadSuccess;
        } else {
          that.loading.close();
          that.$message.error(res.message);
        }
      });
    },
    chooseVideo() {
      document.getElementById("fileUpload").click(); //触发input-file文件上传控件 tirggerFile
    },
    chooseImage() {
      document.getElementById("upload_file").click(); //触发input-file文件上传控件 tirggerFile
    },
    // 上传图片
    tirggerFile(el) {
      var file = el.target.files[0]; //name: "dangqi1.png" || type: "image/png"
      var type = file.type.split("/")[0];
      if (type === "image") {
        //将图片img转化为base64
        var reader = new FileReader();
        reader.readAsDataURL(file);
        var that = this;
        that.loading = that.$loading({
          lock: true,
          text: "上传中",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        reader.onloadend = function () {
          var dataURL = reader.result;
          var blob = that.dataURItoBlob(dataURL);
          that.upload(blob); //执行上传接口
        };
      } else {
        this.$message.error("请上传图片");
      }
    },
    dataURItoBlob(dataURI) {
      // base64 解码
      let byteString = window.atob(dataURI.split(",")[1]);
      let mimeString = dataURI.split(",")[0].split(":")[1].split(";")[0];
      let ab = new ArrayBuffer(byteString.length);
      let ia = new Uint8Array(ab);
      for (let i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }
      return new Blob([ab], { type: mimeString });
    },
    upload(imgUrl) {
      let that = this;
      var formdata = new FormData();
      formdata.append("file", imgUrl);
      postUploadCard(this.id, formdata).then((res) => {
        //关闭加载窗口
        that.loading.close();
        if (res.code == 200) {
          that.loading.close();
          that.$message.success(res.message);
          this.uploadImg = res.data;
          //清空input file的值
          let test = document.getElementById("upload_file");
          test.value = "";
        } else {
          that.loading.close();
          that.$message.error(res.message);
        }
      });
    },
    // 信息真实确认
    basicFacts(val) {
      this.data.id = this.id;
      this.data.infoProcess = 1;
      this.data.isConfirm = val;
      this.postConfirmInfo(this.data);
    },
    check(val) {
      this.data.id = this.id;
      this.data.infoProcess = 2;
      this.data.isConfirm = val;
      this.postConfirmInfo(this.data);
    },
    confirm(val) {
      this.data.id = this.id;
      this.data.infoProcess = 3;
      this.data.isConfirm = val;
      this.postConfirmInfo(this.data);
    },
    postConfirmInfo(data) {
      postConfirmInfo(this.id, data).then((res) => {
        console.log(res);
      });
    },
    // 查看按钮
    basicFactsLook() {
      this.dialogVisible = true;
    },
    //获取基础信息
    getBasicInfo(id) {
      getBasicInfo(id).then((res) => {
        if (res.code == 200) {
          this.form = res.data;
          this.formLine.phoneNum = res.data.phoneNumber;
        } else {
          this.$message({
            message: res.message,
            type: "error",
          });
        }
      });
    },
    withholdLook() {
      this.dialogWithhold = true;
      getWithHoldInfo(this.id).then((res) => {
        if (res.code == 200) {
          this.formWithhold = res.data;
        } else {
          this.$message({
            message: res.message,
            type: "error",
          });
        }
      });
    },
    //查看pdf
    confirmLook() {
      this.dialogContract = true;
      getContract(this.id).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.contractUrl = res.data;
        }
      });
    },
    // 下一步
    nick() {
      // let postObj = {};
      // postObj.code = this.formLine.phoneCode;
      // postObj.id = this.id;
      checkCompleteSign(this.id).then((res) => {
        if (res.code == 200) {
          this.$router.push({
            path: "/sign/index/face",
          });
        }
      });
    },
    faceFun() {
      let form = {};
      form.id = this.id;
      form.metaInfo = JSON.stringify(getMetaInfo());
      console.log(form);
      postInitFace(this.id, form).then((res) => {
        console.log(res);
        // if(res.code == 200) {

        // }
      });
    },
    // 验证码倒计时
    countDown() {
      let t = null;
      let timer = 60;
      this.btnDis = true;
      clearInterval(t);
      this.btnText = `${timer}s`;
      t = setInterval(() => {
        if (timer == 0) {
          clearInterval(t);
          this.btnText = "重新发送";
          this.btnDis = false;
          return;
        }
        timer--;
        this.btnText = `${timer}s`;
      }, 1000);
    },
    // 验证码倒计时
    countDownYS() {
      let t = null;
      let timer = 60;
      this.btnDisys = true;
      clearInterval(t);
      this.btnTextys = `${timer}s`;
      t = setInterval(() => {
        if (timer == 0) {
          clearInterval(t);
          this.btnTextys = "重新发送";
          this.btnDisys = false;
          return;
        }
        timer--;
        this.btnTextys = `${timer}s`;
      }, 1000);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.hello {
  background-color: #f8f8f8;
  width: 100%;
  text-align: left;
  overflow: hidden;
}
.faceStyle {
  width: 100%;
  height: 200px;
  border: 1px black solid;
}
.file-ipt {
  position: absolute;
  opacity: 0;
  bottom: 25px;
  text-align: center;
  z-index: 10;
}
.title {
  font-size: 16px;
  color: #333333;
  margin-bottom: 15px;
  font-weight: bold;
}
.check {
  position: relative;
  padding: 17px 10px;
  background-color: white;
  margin-bottom: 10px;
}
.checkHt {
  padding: 20px 10px;
  background-color: white;
  margin-bottom: 19px;
}
::v-deep .el-checkbox__label {
  color: #333333;
  font-size: 14px;
}
::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #333333;
}

.btn {
  line-height: 0;
  padding: 10px;
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
  position: absolute;
  right: 10px;
}
.btnHt {
  line-height: 0;
  padding: 10px;
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}
.cardImg {
  padding: 20px 58px;
  background-color: white;
  margin-bottom: 19px;
}
.cardImg_shot {
  width: 100%;
  height: 150px;
}
.cardImg_height {
  height: 60px;
  position: relative;
  top: 20px;
}
.cardBtn {
  width: 100%;
  border-radius: 25px;
  position: absolute;
  z-index: 1;
}
.video_text {
  font-size: 14px;
  color: #333333;
}
.video_content {
  font-size: 18px;
  color: #333333;
  font-weight: bold;
  margin-top: 24px 0 28px 0;
}
.video {
  padding: 20px 58px;
  background-color: white;
  margin-bottom: 19px;
  position: relative;
}
.video_shot {
  width: 100%;
  height: 150px;
}
.videoBtn {
  width: 100%;
  border-radius: 25px;
  width: 100%;
  border-radius: 25px;
  // position: absolute;
  // z-index: 1;
}
.sign {
  width: 100%;
  background-color: white;
}
.sign_text {
  font-size: 14px;
  color: #333333;
  line-height: 24px;
}
.sign_check {
  position: relative;
  padding: 10px 10px;
  background-color: rgba(204, 204, 204, 0.1);
  border: 1px solid #cccccc;
}
.sign_number {
  font-size: 14px;
  color: #333333;
  margin: 20px 0;
}
::v-deep .el-form--inline .el-form-item__content {
  width: 100%;
}
::v-deep .el-input__inner {
  border-radius: 25px;
}
.code {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: transparent;
  border-radius: 25px;
  text-align: center;
  padding: 12px 15px;
}
.nick {
  width: 100%;
  border-radius: 25px;
  margin: 34px 0 52px 0;
}
::v-deep .el-dialog__body {
  padding: 0 20px 20px 20px;
}
::v-deep .el-dialog__title {
  font-size: 16px;
}
ul {
  line-height: 30px;
}
</style>
